import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { useState, useEffect, useCallback } from 'react'
import './hzxq.scss'

function Hzxq() {
    const navigate = useNavigate()
    
    // 状态管理
    const [currentNumber, setCurrentNumber] = useState(15) // 当前就诊号
    const [myQueueNumber] = useState(20) // 我的排队号(固定值，暂不更新)
    const [waitingCount, setWaitingCount] = useState(5) // 等待人数
    const [isRefreshing, setIsRefreshing] = useState(false) // 刷新状态
    const [showLoadingDialog, setShowLoadingDialog] = useState(false) // 显示加载对话框
    const [showStatusMessage, setShowStatusMessage] = useState(true) // 显示状态消息(初始为true，因为waitingCount=1)
    const [isUpdating, setIsUpdating] = useState(false) // 防止重复更新

    // 更新队列数据的函数
    const updateQueueData = useCallback(() => {
        // 防止重复更新
        if (isUpdating) return
        
        setIsUpdating(true)
        
        // 使用函数式更新确保状态一致性
        setWaitingCount(prevWaiting => {
            if (prevWaiting > 0) {
                const newWaitingCount = prevWaiting - 1
                
                // 状态消息显示由useEffect监听waitingCount变化来控制
                
                return newWaitingCount
            }
            return prevWaiting
        })
        
        // 同时更新当前就诊号
        setCurrentNumber(prevCurrent => {
            // 当前就诊号不能超过您的排队号
            if (prevCurrent < myQueueNumber) {
                return prevCurrent + 1
            }
            return prevCurrent
        })
        
        // 重置更新状态
        setTimeout(() => {
            setIsUpdating(false)
        }, 100)
    }, [myQueueNumber, isUpdating])

    // 手动刷新队列
    const handleRefreshQueue = () => {
        // 防止在刷新过程中重复调用
        if (isRefreshing || isUpdating) return
        
        setIsRefreshing(true)
        setShowLoadingDialog(true)
        // 模拟API调用延迟
        setTimeout(() => {
            updateQueueData()
            setIsRefreshing(false)
            // 延迟隐藏加载对话框
            setTimeout(() => {
                setShowLoadingDialog(false)
            }, 500)
        }, 1500)
    }

    // 15秒自动更新
    useEffect(() => {
        const interval = setInterval(() => {
            // 只有在没有手动刷新和没有正在更新时才执行自动更新
            if (!isRefreshing && !isUpdating) {
                updateQueueData()
            }
        }, 15000) // 15秒 = 15000毫秒

        return () => clearInterval(interval)
    }, [updateQueueData, isRefreshing, isUpdating])

    // 监听waitingCount变化，更新状态消息显示
    useEffect(() => {
        if (waitingCount === 1) {
            setShowStatusMessage(true)
        } else {
            setShowStatusMessage(false)
        }
    }, [waitingCount])

    return (
        <div className='hzxq'>
            <div className='hzxq-top'>
                <span>{<LeftOutline className='hzxq-top-left' onClick={() => navigate(-1)}></LeftOutline>}</span>
                <span className='hzxq-top-title'>候诊详情</span>
            </div>
            <div className='hzxq-bg'>
                <div className='hzxq-bg-one'>
                    <span><img src="../../../public/59.png" alt="" className='hzxq-bg-img' /></span>
                    <div className='hzxq-doctor-info'>
                        <div className='hzxq-doctor-name-title'>
                            <span className='hzxq-bg-one-name'><b>刘医生</b></span>
                            <span className='hzxq-bg-one-title'>主任医师</span>
                        </div>
                        <div className='hzxq-doctor-department-hospital'>
                            <span className='hzxq-bg-one-department'>门诊外一科</span>
                            <span className='hzxq-bg-one-hospital'>四川省保健院南苑</span>
                        </div>
                    </div>
                </div>
                <div className='hzxq-bg-two'>
                    <div className='hzxq-bg-two-item'>
                        <div className='queue-panel-current-number'>
                            <div className='panel-label'>当前就诊号</div>
                            <div className='panel-number'>{currentNumber}</div>
                        </div>
                        <div className='queue-panel-my-queue'>
                            <div className='panel-label'>我的排队号</div>
                            <div className='panel-number'>{myQueueNumber}</div>
                        </div>
                        <div className='queue-panel-waiting-count'>
                            <div className='panel-label'>等待人数</div>
                            <div className='panel-number'>{waitingCount}</div>
                        </div>
                    </div>
                </div><div className='hzxq-bg-three'>
                    <div className='refresh-section'>
                        <button 
                            className='refresh-button' 
                            onClick={handleRefreshQueue}
                            disabled={isRefreshing}
                        >
                            {isRefreshing ? '刷新中...' : '刷新队列'}
                        </button>
                    </div>
                    <div className='disclaimer'>
                        注：如有特殊情况，请以现场排队情况为准
                    </div>
                </div>
            </div>

            {/* 加载对话框 */}
            {showLoadingDialog && (
                <div className="loading-overlay">
                    <div className="loading-dialog">
                        <div className="loading-spinner"></div>
                        <div className="loading-text">正在刷新中...</div>
                    </div>
                </div>
            )}

            {/* 状态消息气泡 */}
            {showStatusMessage && (
                <div className="status-message-bubble">
                    即将到诊,请等待医生叫号,请勿离开
                </div>
            )}

        </div>
    )
}

export default Hzxq